<script lang="ts">
export default {
  name: "DeviceRecordFormHeader"
}
</script>

<template>
  <el-form ref="queryFormRef" :inline="true" :model="dataState.queryParams">
    <!-- 下拉框：设备类型 -->
    <el-form-item label="设备厂商">
      <el-select v-model="dataState.queryParams.manufacturer" placeholder="请选择" @change="handleSelectManufacturer">
        <el-option
          v-for="item in dataState.manufacturerOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>

    <!-- 下拉框：设备类型 -->
    <el-form-item label="设备类型">
      <el-select v-model="dataState.queryParams.deviceType" placeholder="请选择" @change="handleSelectDeviceType">
        <el-option
          v-for="item in dataState.deviceTypeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>

    <!-- 下拉框：设备类型 -->
    <el-form-item label="设备名称">
      <el-select v-model="dataState.queryParams.deviceName" placeholder="请选择">
        <el-option
          v-for="item in dataState.deviceNameOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>


    <el-form-item prop="recordName">
      <el-input v-model="dataState.queryParams.recordName" clearable placeholder="事件名称" @keyup.enter="handleQuery"/>
    </el-form-item>

    <el-form-item>
      <el-button :icon="Search" type="primary" @click="handleQuery">搜索</el-button>
      <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import {onMounted, reactive} from "vue";

import {
  DeviceRecordQueryParam
} from "@/api/device/record/types";

import {Search, Refresh} from '@element-plus/icons-vue';
import {listOption2List, listOptionList} from "@/api/option";
import {DeviceQueryParam} from "@/api/device/device/types";
import {listOptions} from "@/api/device/device";

const emit = defineEmits(['query']);// 定义组件的事件通知


// 数据状态：定义
let dataState = reactive({
  // 厂商类型选项
  manufacturerOptions: [] as OptionType[],
  // 设备类型选项
  deviceTypeOptions: [] as OptionType[],
  // 设备名称选项
  deviceNameOptions: [] as OptionType[],
  // 查询参数
  queryParams: {pageNum: 1, pageSize: 10} as DeviceRecordQueryParam,
});

/**
 * 设备类型下拉框
 * @taskParam value
 */
function handleSelectManufacturer(value: any) {
  listDeviceTypeOption(true);
}

/**
 * 设备类型下拉框
 * @taskParam value
 */
async function handleSelectDeviceType(value: any) {
  listDeviceNameOption(true);
}

function listDeviceTypeOption(nextMode: boolean) {
  if (nextMode) {
    dataState.deviceTypeOptions = [];
    dataState.queryParams.deviceType = '';
  }

  // 查询设备类型下的设备
  let manufacturer = dataState.queryParams.manufacturer as string;

  // 查询厂商的设备类型
  listOption2List("OperateEntity", "manufacturer", manufacturer, 'deviceType').then(({data}) => {
    dataState.deviceTypeOptions = data;
    if (nextMode && dataState.deviceTypeOptions.length > 0){
      dataState.queryParams.deviceType = dataState.deviceTypeOptions[0].value;
      listDeviceNameOption(nextMode);
    }
  });
}

function listDeviceNameOption(nextMode: boolean) {
  if (nextMode) {
    dataState.deviceNameOptions = [];
    dataState.queryParams.deviceName = '';
  }

  // 查询设备类型下的设备
  let dataForm = {} as DeviceQueryParam;
  dataForm.manufacturer = dataState.queryParams.manufacturer;
  dataForm.deviceType = dataState.queryParams.deviceType;
  listOptions("deviceName",dataForm).then(({data}) => {
    dataState.deviceNameOptions = data;
    if (nextMode && dataState.deviceNameOptions.length>0){
      dataState.queryParams.deviceName = dataState.deviceNameOptions[0].value;
    }
  });
}

function handleQuery() {
  emit('query', 'header', dataState.queryParams);
}

function resetQuery() {
  dataState.deviceTypeOptions = [];
  dataState.deviceNameOptions = [];

  dataState.queryParams.manufacturer = undefined;
  dataState.queryParams.deviceType = undefined;
  dataState.queryParams.deviceName = undefined;
  dataState.queryParams.recordName = undefined;
  emit('query', 'header', dataState.queryParams);
}

/**
 * 响应页面安装：页面的初始化工作
 */
onMounted(() => {
  // 查询厂商选项，并保存在存量区
  listOptionList("OperateEntity", "manufacturer").then(({data}) => {
    dataState.manufacturerOptions = data;
  });
  // 查询设备类型选项，并保存在产量区
  listOptionList("OperateEntity", "deviceType").then(({data}) => {
    dataState.deviceTypeOptions = data;
  });
});

</script>
